<template>
  <!-- 注册页 -->
  <div class="registerPage">
    <!-- 手机顶部 -->
    <img src="@/assets/phoneTop.jpg" alt class="phoneTop" />

    <div class="login">
      <!-- 返回按钮 -->
      <div class="iconfont iconicon-"  @click="$router.back()"></div>
      <!-- 头条logo -->
      <div class="logo">
        <img src="@/assets/logo.png" />
      </div>

      <!-- 使用vant 表单 -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.username"
          name="用户名 / 手机号码"
          placeholder="用户名 / 手机号码"
          :rules="[{ pattern: /^\d{5,11}$/, message: '请填写正确的中国大陆地区手机号' }]"
        />

        <van-field
          v-model="form.nickname"
          name="昵称"
          placeholder="昵称"
          :rules="[{ pattern: /^\w{5,8}$/, message: '昵称长度应为5～8位字符' }]"
        />

        <van-field
          v-model="form.password"
          name="密码"
          placeholder="密码"
          type="password"
          :rules="[{ pattern:/^.{3,9}$/, message: '密码长度应为3～9位字符' }]"
        />

        <div style="margin-top:13.333vw;">
          <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        nickname: "",
        password: ""
      }
    };
  },
  methods: {
    onSubmit(values) {
      // console.log(this.form);
      this.$axios({
        url: "/register",
        method: "POST",
        data: this.form
      }).then(res => {
        console.log(res);
        const { message } = res.data;

        if (message === "注册成功") {
          this.$toast.success(message);

          this.$router.push('/login');

        } else {
          this.$toast.fail("注册失败，请重试");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.phoneTop {
  width: 100%;
}

.login {
  padding: 7.222vw 5vw;

  .iconicon- {
    font-size: 5.556vw;
  }

  .logo {
    text-align: center;
    padding: 11vw;

    img {
      height: 16vw;
      width: 28vw;
    }
  }

  .van-cell {
    border-bottom: 0.278vw solid #000;
    padding: 5.556vw 0;

    /deep/ .van-field__control {
      font-size: 5vw;
    }
  }

  .van-button {
    background-color: #fd4a68;
    border: #fd4a68;
    height: 13.889vw;
    font-size: 5vw;
  }
}
</style>